<template>
  <div class="ant-alert ant-alert-info h-table-selection-info">
    <div class="selection-info">
      <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        value.length }}</a>项
      <a style="margin-left: 24px" v-show="value && value.length" @click="clear">清空</a>
    </div>
    <div>
      <slot/>
    </div>
  </div>
</template>
<script>
import { createModelForVue, createProps } from '@/utils/CommonUtils'

export default {
  name: 'TableSelectionInfo',
  model: createModelForVue(),
  props: {
    value: createProps(Array)
  },
  methods: {
    clear () {
      this.$emit('change', [])
    }
  }
}
</script>
<style>
.h-table-selection-info .selection-info {
  flex: 1
}
.h-table-selection-info {
  display: flex;
  margin-bottom: 10px;
}
</style>